<template>
    <div class="tab-bar border-top-1px">
        <div class="items">
            <div class="item " @click="turn(index)" :class="{selected:item.path==path}" v-for="(item,index) in tabs" :key="index" >
                <span class="iconfont" :class="item.icon"></span>
                <span class="txt">{{item.name}}</span>
                <span class="badge" v-if="item.badge">{{item.badge}}</span>
            </div>
        </div>
    </div>
</template>

<script>

    export default {
        methods:{
          turn(index){
              this.$router.push({
                  path:this.tabs[index].path
              })
          }
        },
        props:{
          tabs:null,
          path:null
        },
        data(){
            return{

            }
        }
    }
</script>

<style scoped lang="stylus">
    .tab-bar
        border-color $border-split-color
        position fixed
        bottom 0
        left 0
        right 0
        z-index 1
        height $bar-height
        background-color white
        .items
            height 100%
            display flex
            align-items center
            .item
                height 100%
                display flex
                flex-direction column
                align-items center
                justify-content center
                flex 1
                position relative
                .badge
                    color white
                    background-color red
                    font-size 8px
                    line-height 12px
                    padding 1px 3px
                    border-radius 5px
                    position absolute
                    left  60%
                    top 2px
                .iconfont
                    font-size 14px
                    font-weight 600
                    color #d5dbdb
                .txt
                    font-size 11px
                    margin-top 3px
                    color #d5dbdb
                &.selected
                    .iconfont,.txt
                        color #00d6c0

</style>
